<template>
  <div class="box">
    <p class="Count">热门景区排行</p>
    <p class="top-img"></p>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
let charts = ref();
onMounted(() => {
  var yData = [
    "浙江省景区",
    "杭州市档景区",
    "宁波市档景区",
    "温州市档景区",
    "嘉兴市档景区",
    "湖州市档景区",
    "绍兴市档景区",
    "金华市档景区",
    "丽水市档景区",
    "舟山市档景区",
  ];
  var data = [
    "2000",
    "1800",
    "1600",
    "1000",
    "800",
    "600",
    "400",
    "300",
    "200",
    "200",
  ];

  var max = Math.max.apply(null, data as any);
  var getMax = [];
  for (let i = 0; i < yData.length; i++) {
    getMax.push(max);
  }
  let option = {
    backgroundColor: "#0b1751",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params: any) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    grid: {
      right: "12%",
      left: "30%",
      top: "10%",
      bottom: "1%",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        offset: 120,
        axisLabel: {
          show: true,
          align: "left",
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
          formatter: function (value: any, index: any) {
            var num = "";
            var str = "";
            num = index + 1;
            if (index === 0) {
              str = "{no1|" + "} {num1|" + num + "} {title1| " + value + "}";
            } else if (index === 1) {
              str = "{no2|" + "} {num2|" + num + "} {title2| " + value + "}";
            } else if (index === 2) {
              str = "{no3|" + "} {num3|" + num + "} {title3| " + value + "}";
            } else {
              str = " {num|" + num + "} {title| " + value + "}";
            }
            return str;
          },
          rich: {
            num: {
              color: "#387ec1",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [6, 5, 3, 5],
              align: "center",
              shadowColor: "#3374ba",
              borderColor: "#3374ba",
              borderWidth: 1,
            },
            num1: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1,
            },
            num2: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1,
            },
            num3: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1,
            },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: yData,
      },
      {
        type: "category",
        inverse: true,
        offset: 0,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
        },
        data: data,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            // barBorderRadius: 30,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "transparent", //  0%  处的颜色
                },
                {
                  offset: 1,
                  color: "#00d0ff", //  100%  处的颜色
                },
              ],
              global: false, //  缺省为  false
            },
          },
        },
        barWidth: 20,
        data: data,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
        data: getMax,
        itemStyle: {
          color: "#152448",
          // barBorderRadius: 30,
        },
      },
    ],
  };
  let mycharts = echarts.init(charts.value);
  mycharts.setOption(option);
});
</script>

<style scoped lang="scss">
.box {
  background-color: #fff;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  color: white;
  .top-img {
    margin-left: 20px;
    width: 67px;
    height: 7px;
    margin-top: 10px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: 100% 100%;
  }
  .Count {
    margin-left: 20px;
    font-size: 20px;
  }
  .charts {
    height: 260px;
  }
}
</style>
